<html>
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    <span id="localdate"></span><br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">淦</h1>
            </div>
            <div id="navigation"></div>
        </div>
        <div id="content">
            <p id="whereami"></p>
            <h1>登录</h1>
            <form id="loginInfo" method="post">
                <table cellpadding="0" cellspacing="0" border="0" class="form_table">
                    <tr>
                        <td valign="middle" align="right">用户名:</td>
                        <td valign="middle" align="left">
                            <input type="text" class="logininput" id="username"/>
                            <span id="usernameMessage" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">密码:</td>
                        <td valign="middle" align="left">
                            <input type="password" class="logininput" id="password"/>
                            <span id="passwordMessage" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">验证码:</td>
                        <td valign="middle" align="left">
                            <input type="text" class="logininput" id="number" onfocus="$('#codeMessage').text('')"/>
                            <img id="code" onclick="getValidationImage()" border="1" alt="点击查看验证码" style="cursor: pointer;float: right;border: none"/>
                            <span id="codeMessage" class="error" style="float: right"></span>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">账号类型:</td>
                        <td valign="middle" align="left">
                            <input type="radio" class="logininput" name="status" value="1"/>管理员&nbsp;&nbsp;
                            <input type="radio" class="logininput" name="status" value="2" checked/>运动员
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" class="button" onclick="login()" value="确定 &raquo;"/>
                    <a href="register.html"><input type="button" class="button" value="注册 &raquo;"/></a>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">1811953427@qq.com</div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

    let passwordMsg = $("#passwordMessage");
    let usernameMsg = $("#usernameMessage");
    let codeMsg     = $("#codeMessage");

    let map = {}
    fillCustomMessage();

    function fillCustomMessage() {
        let messages = document.cookie.split("; ");
        for (let i = 0; i < messages.length; i++) {
            let ms = messages[i].split("=");
            map[ms[0]] = ms[1];
        }
        $("#title").text(map.message);
        $("#footer_bg").text(map.email);
        $("#localdate").text(map.time);
    }

    // 获取验证码图片
    function getValidationImage() {
        $("#code").attr("src", "getCode?time=" + new Date());
    }

    function clearMessage(...element) {
        element.forEach(e => e.text(""));
    }

    // 登录
    function login() {
        let username = $("#username");
        let password = $("#password");
        let status = $("input[name=status]:checked");
        let number = $("#number");

        clearMessage(passwordMsg, usernameMsg, codeMsg);
        $.post({
            url: "login",
            data: {
                "username": username.val(),
                "password": password.val(),
                "status"  : status.val(),
                "number"  : number.val()
            },
            success(data) {
                // 登录成功
                if (data.code == 200) {
                    alert("登录成功");
                    window.location.href = status.val() == 1 ?
                        "admin" : "student";
                } else {
                    if (data.errorCode > 0) { alert(data.message); }
                    // 验证失败
                    if (data.errorCode == -1) { passwordMsg.text(data.message); }
                    // 密码错误
                    if (data.errorCode == -2) { usernameMsg.text(data.message); }
                    // 用户不存在
                    if (data.errorCode == -3) { codeMsg.text(data.message); }
                }
            },
            error(data) {
                console.log(data);
            }
        });
    }

</script>
</body>
</html>